<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<style>
    body {
        padding: 20px;
        background: #fff;
        margin: 20px 20px 20px 20px;
    }
</style>
<body>


<div class="content">

    <form class="layui-form layui-form-item con1">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称：</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" id="usrId" name="usrId" placeholder="商品名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline" style="float: right;">
            <div class="layui-btn-group">
                <button type="reset" class="layui-btn">重置</button>
                <button type="button" class="layui-btn">查询</button>
            </div>
        </div>

    </form>

    <table id="list_table" lay-filter="list_table"></table>

</div>

</body>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'sample']);

    var form;
    var layer;
    var element;
    var table;
    var tableIns;//表格实例
    var $;
    layui.use(['jquery', 'layer', 'form', 'element', 'table'], function () {
        form = layui.form;
        element = layui.element;
        layer = layui.layer;
        table = layui.table;
        $ = layui.jquery;
        //第一个实例
        tableIns = table.render({
            elem: '#list_table',
            url: '/item/getAll' //数据接口
            ,
            method: "GET",
            page: {
                limit: 8    //每页显示数据条数
                , layout: ['prev', 'page', 'next', 'limit', 'count', 'skip', 'refresh']
                , limits: [5, 6, 7, 8, 9, 10]    //显示数据条数
                , first: '首页'
                , prev: '上一页'
                , next: '下一页'
                , groups: 5       //连续页码个数
            }
            ,
            title: "商品表",
            id: "empId",
            cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'},
                    {
                        field: 'id',
                        width: 80,
                        title: 'ID',
                        fixed: 'left',
                        align: 'center'
                    }, {
                    field: 'title',
                    title: '标题',
                }, {
                    field: 'sellPoint',
                    title: '商品简介',
                }, {
                    field: 'price',
                    title: '单价',
                    width: 90,
                    align: 'center'
                }, {
                    field: 'num',
                    title: '库存数量',
                    width: 90,
                    align: 'center'
                }, {
                    field: 'status',
                    width: 90,
                    title: '商品状态',
                    align: 'center',
                    templet: function (d) {
                        if (d.status === 1) {
                            return '<span class="layui-badge layui-bg-blue">正常</span>';
                        } else if (d.status === 2) {
                            return '<span class="layui-badge layui-bg-orange">已下架</span>';
                        } else {
                            return '<span class="layui-badge">已删除</span>';
                        }
                    }
                }, {
                    field: 'created',
                    title: '创建时间',
                    align: 'center'
                }, {
                    field: 'updated',
                    title: '修改时间',
                    align: 'center'
                }, {
                    title: '操作',
                    align: 'center',
                    width: 125,
                    fixed: 'right',
                    templet: function () {
                        return '<div class="layui-btn-group">' +
                            '  <button class="layui-btn  layui-btn-sm">编辑</button>' +
                            '  <button class="layui-btn layui-bg-red layui-btn-sm">删除</button>' +
                            '</div>';
                    }
                }
                ]
            ],
            even: true,
            toolbar:
                '<div class="layui-table-tool-temp">' +
                '<div class="layui-inline" lay-event="add" title="增加"><i class="layui-icon layui-icon-add-1"></i></div>' +
                '<div class="layui-inline" lay-event="delete" title="删除"><i class="layui-icon layui-icon-delete"></i></div>' +
                '</div>', //让工具栏左侧显示菜单按钮
            defaultToolbar: ['filter', 'print', 'exports'],
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，
                // res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                form.render('select'); //刷新select选择框渲染
            }
        });

    });

    var admin = layui.admin;
    admin.popup({
        type: 2,
        content: 'http://sentsin.com'
        //这里content是一个URL，如果你不想让iframe出现滚动条，
        // 你还可以content: ['http://sentsin.com', 'no']
    });

</script>
</html>